<div class="container">
  <div class="row">

    <div class="col s12 m8 offset-m1 xl7 offset-xl1">

      <div class="section">

        <div id="headers" class="section scrollspy">
          <h3 class="header">Headers</h3>
          <p>We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.</p>
          <div class="card-panel">
            <h1>Heading h1</h1>
            <h2>Heading h2</h2>
            <h3>Heading h3</h3>
            <h4>Heading h4</h4>
            <h5>Heading h5</h5>
            <h6>Heading h6</h6>
          </div>
        </div>

        <div id="blockquote" class="section scrollspy">
          <h3 class="header">Blockquotes</h3>
          <p>
            Blockquotes are mainly used to give emphasis to a quote or citation. You can also use these for some extra text hierarchy and emphasis.
            </p>
          <blockquote>
            This is an example quotation that uses the blockquote tag.
            <br>Here is another line to make it look bigger.
          </blockquote>
          <pre><code class="language-markup">
    &lt;blockquote>
      This is an example quotation that uses the blockquote tag.
    &lt;/blockquote>
          </code></pre>
        </div>

        <div id="flow" class="section scrollspy">
          <h3 class="header">Flow Text</h3>
          <a id="flow-toggle" class="btn waves-effect waves-light">Toggle flow-text</a>
          <div id="flow-text-demo" class="card-panel">
          <p class="flow-text">
          One common flaw we've seen in many frameworks is a lack of support for truly responsive text. While elements on the page resize fluidly, text still resizes on a fixed basis. To ameliorate this problem, for text heavy pages, we've created a class that fluidly scales text size and line-height to optimize readability for the user. Line length stays between 45-80 characters and line height scales to be larger on smaller screens.</p>
          <p class="flow-text">To see Flow Text in action, slowly resize your browser and watch the size of this text body change! Use the button above to toggle off/on flow-text to see the difference!</p>
          </div>

          <br>

          <p>To use flow-text on a body of text, simply just add the class <code class="language-markup">flow-text</code> to a tag, see the code below.</p>
          <pre><code class="language-markup">
    &lt;p class="flow-text">I am Flow Text&lt;/p>
          </code></pre>
        </div>

      </div>

    </div>
    <div class="col hide-on-small-only m3 xl3 offset-xl1">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIK27J&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#headers">Headers</a></li>
            <li><a href="#blockquote">Blockquotes</a></li>
            <li><a href="#flow">Flow Text</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div> <!-- End Container -->
